<template>
    <div class="customer-management">
      <h1>客户管理</h1>
      <!-- 数据统计卡片 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">总客户数</div>
            </template>
            <div class="card-content">{{ totalCustomers }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">本月新增客户</div>
            </template>
            <div class="card-content">{{ newCustomersThisMonth }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">活跃客户数</div>
            </template>
            <div class="card-content">{{ activeCustomers }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <template #header>
              <div class="card-header">流失客户数</div>
            </template>
            <div class="card-content">{{ lostCustomers }}</div>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 搜索框 -->
      <el-input v-model="searchKeyword" placeholder="请输入客户名称搜索" @keyup.enter="searchCustomers"></el-input>
      <el-button @click="searchCustomers">搜索</el-button>
      <el-button @click="addCustomer">新增客户</el-button>
  
      <!-- 客户列表 -->
      <el-table :data="customers" stripe>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="客户名称"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="lastVisitDate" label="上次拜访日期"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button @click="editCustomer(scope.row)">编辑</el-button>
            <el-button @click="deleteCustomer(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCustomers"
      >
      </el-pagination>
  
      <!-- 新增/编辑客户对话框 -->
      <el-dialog :visible.sync="dialogVisible" title="新增/编辑客户">
        <template #content>
          <el-form :model="formData" ref="formRef" label-width="80px">
            <el-form-item label="客户名称">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="上次拜访日期">
              <el-date-picker v-model="formData.lastVisitDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-form>
        </template>
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveCustomer">保存</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  
  // 搜索关键字
  const searchKeyword = ref('');
  // 客户列表数据
  const customers = ref<any[]>([]);
  // 当前页码
  const currentPage = ref(1);
  // 每页显示数量
  const pageSize = ref(10);
  // 总客户数
  const totalCustomers = ref(0);
  // 本月新增客户数
  const newCustomersThisMonth = ref(0);
  // 活跃客户数
  const activeCustomers = ref(0);
  // 流失客户数
  const lostCustomers = ref(0);
  // 对话框是否显示
  const dialogVisible = ref(false);
  // 表单数据
  const formData = reactive({
    id: 0,
    name: '',
    phone: '',
    lastVisitDate: ''
  });
  // 表单引用
  const formRef = ref<HTMLFormElement | null>(null);
  
  // 模拟获取客户数据
  const fetchCustomers = async () => {
    try {
      // 这里应该替换为实际的 API 请求
      // 模拟数据
      const mockData = [
        { id: 1, name: '张三', phone: '13800138000', lastVisitDate: '2024-10-01' },
        { id: 2, name: '李四', phone: '13900139000', lastVisitDate: '2024-10-02' }
      ];
      customers.value = mockData;
      totalCustomers.value = mockData.length;
      newCustomersThisMonth.value = 2;
      activeCustomers.value = 2;
      lostCustomers.value = 0;
    } catch (error) {
      ElMessage.error('获取客户数据失败');
    }
  };
  
  // 搜索客户
  const searchCustomers = () => {
    // 这里实现搜索逻辑，可根据 searchKeyword 过滤数据
    console.log('搜索关键字:', searchKeyword.value);
    fetchCustomers();
  };
  
  // 新增客户
  const addCustomer = () => {
    formData.id = 0;
    formData.name = '';
    formData.phone = '';
    formData.lastVisitDate = '';
    dialogVisible.value = true;
  };
  
  // 编辑客户
  const editCustomer = (row: any) => {
    formData.id = row.id;
    formData.name = row.name;
    formData.phone = row.phone;
    formData.lastVisitDate = row.lastVisitDate;
    dialogVisible.value = true;
  };
  
  // 删除客户
  const deleteCustomer = (id: number) => {
    // 这里应该替换为实际的 API 请求
    console.log('删除客户 ID:', id);
    fetchCustomers();
  };
  
  // 保存客户
  const saveCustomer = () => {
    // 这里应该替换为实际的 API 请求
    if (formData.id === 0) {
      console.log('新增客户:', formData);
    } else {
      console.log('编辑客户:', formData);
    }
    dialogVisible.value = false;
    fetchCustomers();
  };
  
  // 每页数量变化
  const handleSizeChange = (newSize: number) => {
    pageSize.value = newSize;
    fetchCustomers();
  };
  
  // 当前页码变化
  const handleCurrentChange = (newPage: number) => {
    currentPage.value = newPage;
    fetchCustomers();
  };
  
  onMounted(() => {
    fetchCustomers();
  });
  </script>
  
  <style scoped>
  .customer-management {
    padding: 20px;
  }
  
  .card-header {
    font-size: 16px;
    font-weight: bold;
  }
  
  .card-content {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-top: 10px;
  }
  </style>